<template>
	<view class="page-suspension">
		<view class="top_bgimg" :style="'height:'+topBarHeight+'px;'">
			<view class="top_cont" :style="'height:'+ tabBarHeight+'px;margin-top:'+stateBarHeight+'px;'">
				<image src="https://web.suqzp.com/public/jiantou2.png" mode="aspectFit"  @click="gotoBack" class="back-pre"></image>
				<text class="fc-ff">{{navbarData.title}}</text>
			</view>
		</view>
		<view :style="'height:'+topBarHeight+'px;'"></view>
		<view class="page-suspension-bj">
			<image class="page-suspension-bj" :src="navbarData.src"></image>			
		</view>
		<view class="wrap pad-bot-0">
			<view class="cont-t-1 flex jcsb">
				<view class="f-l">
					<view class="fs-36 fc-ff">¥{{cashBackInfo.cashBackBalance || 0}}</view>
					<view class="fs-28 fc-ff">可提现金额</view>
				</view>
				<view class="Withdrawal-btn">可提现</view>
			</view>
		</view>
		<view class="white-line"></view>
		<view class="wrap pad-bot-0">
			<view class="cont-t-1 flex jcsb" style="top: 25rpx;">
				<view class="f-l" @click="totemplat(1)">
					<view class="fs-28 fc-ff text-tc">{{cashBackInfo.withDrawalTotal || 0}}</view>
					<view class="fs-28 fc-ff text-tc">已提现</view>
				</view>
				<view class="f-l" @click="totemplat(2)">
					<view class="fs-28 fc-ff text-tc">{{cashBackInfo.waitWithDrawalTotal || 0}}</view>
					<view class="fs-28 fc-ff text-tc">未结算</view>
				</view>
				<view class="f-l" @click="totemplat(3)">
					<view class="fs-28 fc-ff text-tc">{{hotelCount}}</view>
					<view class="fs-28 fc-ff text-tc">我的商家</view>
				</view>
			</view>
		</view>
		<view class="main-l">
			<view class="wrap pad-bot-0">
				<view class="flex info-wap">
					<view class="flex-1 unload-file">
						<text class="fs-28 fc-32 flex-1 uptxt">我的商家</text>
					</view>
					<view class="info-img">				
						<image class="backicon" src="https://web.suqzp.com/public/jiantou.png" style="top: 20rpx;"></image>
					</view>
				</view>
				<view class="flex info-wap">
					<view class="flex-1 unload-file">
						<text class="fs-28 fc-32 flex-1 uptxt">分销订单</text>
					</view>
					<view class="info-img">				
						<image class="backicon" src="https://web.suqzp.com/public/jiantou.png" style="top: 20rpx;"></image>
					</view>
				</view>
				<view class="flex info-wap">
					<view class="flex-1 unload-file">
						<text class="fs-28 fc-32 flex-1 uptxt">推广二维码</text>
					</view>
					<view class="info-img flex aic">
						<view>邀请码：{{userInfo.cheats || ''}}</view>
						<image class="backicon" src="https://web.suqzp.com/public/jiantou.png" style="top: 20rpx;"></image>
					</view>
				</view>
				<view class="flex info-wap" @click="toModel(4)">
					<view class="flex-1 unload-file">
						<text class="fs-28 fc-32 flex-1 uptxt">提现记录</text>
					</view>
					<view class="info-img">				
						<image class="backicon" src="https://web.suqzp.com/public/jiantou.png" style="top: 20rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
	
		data() {
			return {
				topBarHeight: 0, //状态栏加导航栏高度
				stateBarHeight: 0, //导航栏高度
				tabBarHeight: 50, //状态栏高度
				//顶部数据
				navbarData:{
					title:'业务员中心',
					src:'https://web.suqzp.com/public/ywy.png'
				},
				cashBackInfo: {},
				hotelCount: 0,
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		mounted: function() {
			var self = this;
			uni.getSystemInfo({
				success: function(res) {
					self.stateBarHeight = res.statusBarHeight
					// #ifdef MP-WEIXIN
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					let paddingSize = menuButtonInfo.top - self.stateBarHeight
					self.tabBarHeight = (menuButtonInfo.bottom - self.stateBarHeight) + paddingSize
					self.topBarHeight = menuButtonInfo.bottom + paddingSize
					// #endif
					
					// #ifdef APP-NVUE || APP-PLUS 
					let menuRect = wx.getMenuButtonBoundingClientRect()
					self.topBarHeight = menuRect.top + menuRect.height
					// #endif
					
				},
			})			
		},
		onShow() {
			if(!this.userInfo || !this.userInfo.id) {
				this.$store.dispatch("reLogin")
				return;
			}
			this.getCashBackInfo()
			this.getHotelCount()
		},
		methods:{
			// 商家
			getHotelCount() {
				if(!this.userInfo.cheats) {
					return;
				}
				var param = {
					invitationCode: this.userInfo.cheats
				}
				this.$apis.listHotel(param)
				.then(res=>{
					this.hotelCount = res.total
				})
			},
			// 获取可提现金额
			getCashBackInfo() {
				var param = {
					userId: this.userInfo.id,
					source: 14
				}
				this.$apis.cashBackInfo(param)
				.then(res=>{
					console.log("业务员中心记录",res);
					this.cashBackInfo = res.data;
				})
			},
			// 跳转
			toModel(index) {
				if(index == 1) {
					
				} else if(index == 2) {
					
				} else if(index == 3) {
					
				} else if(index == 4) {
					uni.navigateTo({
						url:'/pages/user/person/distribut/withdrawal_record?source=14'
					})	
				}
				
			},
			//顶部返回
			gotoBack(){
				uni.navigateBack({
					url:"/pages/index/user"
				})
			},
			//我的商家
			totemplat(type){
				if(type == 3){
					uni.navigateTo({
						url:'/pages/user/person/salesman/my_business'
					})
				}
			},
			//协议同意
			radioGroup(e) {
				this.radioValue = e.detail.value;
				console.log(this.radioValue)
			}
		}
	}
</script>

<style lang="scss">
	.page-suspension{
		position: relative;		
	}
/* //背景图片 */
.page-suspension-bj {
	width: 100%;
	position: absolute;
	left: 25%;
	top: 0%;
	transform: translate(-25%, 0);
	z-index: 1;
	display: block;
	background: #8EC7F9;
	height: 506rpx;	
}
.white-line{
	height: 2rpx;
	width: 100%;
	background: #fff;
	position: relative;
	z-index: 2;
	opacity: 0.3;
	margin-top: 80rpx;
}
.cont-t-1{
	position: relative;
	top: 55rpx;
	z-index: 1;
}
.Withdrawal-btn{
	width: 120rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 8rpx;
}
.main-l{
	width: 750rpx;
	min-height: 200rpx;
	background: #FFFFFF;
	border-radius: 20px 20px 20px 20px;
	opacity: 1;
	position: relative;
	z-index: 1;
	top: 65rpx;
	.info-wap{
		background: #fff;
		padding:26rpx 22rpx;
		margin-top: 20rpx;
		height: 60rpx;
		border-bottom: 1px solid #eee;
		.info-img{
			image{
				width: 104rpx;
				height: 104rpx;
				display: inline-block;
				border-radius: 50%;
			}
			.backicon{
				width: 16rpx;
				height: 30rpx;
				display: inline-block;
				position: relative;
				top: 36rpx;
				margin-left: 24rpx;
			}
		}
		.unload-file{			
			.uptxt{
				line-height: 60rpx;
			}
		}
	}
}
</style>
